<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
    <title>Id Card</title>
    <style>
        body {
            font-family: 'Source Sans Pro', serif;
        }

        .row {
            width: 100%;
            overflow: hidden;
        }

        .card {
            border-radius: 10px;
            border: 2px solid #243F60;
            height: 323px;
            width: 204px;
            float: left;
            margin-right: 15px;
            margin-bottom: 30px;
            box-sizing: border-box;
        }

        .light_blue {
            background-color: #D0E2F3;
            border-color: #00206087;
        }

        .bold {
            font-weight: bold
        }

        .header {
            margin-top: 10px;
        }

        .header,
        .content,
        .footer,
        .signature,
        .barcode {
            width: 100%;
            overflow: hidden;
        }

        .footer {
            bottom: 0;
            position: absolute;
        }

        .title {
            font-weight: bold;
            font-size: 14px;
        }

        .logo {
            height: 48px;
            width: 48px;
            float: left;
            margin-right: 5px;

        }

        .logo img {
            width: 100%;
            height: 100%;
        }

        .logo.hrmdc-logo {
            height: 54px
        }

        .student_pic {
            width: 100%;
            display: block;
            overflow: hidden;
            text-align: center;
            box-sizing: border-box;
        }

        .student_pic img {
            width: 100%;
            max-width: 53px;
            margin: 4px auto;
            box-sizing: border-box;
        }

        .signature {
            text-align: right;
        }

        .signature img {
            height: 28px;
            width: 101px;
            display: block;
        }

        .signature img,
        .signature span {
            float: right;
            margin-right: 5px;
        }

        .barcode img {
            width: 100%;
            background-color: #fff;
        }

        .barcode {
            text-align: center
        }

        table,
        span {
            font-size: 12px
        }

        table {
            padding-left: 5px;
            margin-top: 10px;
        }

        .footer span {
            width: 100%
        }

        .back {
            text-align: center;
        }

        .back h3 {
            padding: 0 15px;
            font-weight: normal
        }

        .back h2,
        .back h3 {
            font-size: 16px;
        }

        .back h2 {
            padding: 0 17px;
            margin-bottom: 6px;
        }

        .back span,
        .back a {
            display: block;
            text-align: center;
            font-size: 15px;
            font-weight: bold;
        }

        .back-logo {
            width: 58px
        }

        .hrmghs {
            font-size: 15px
        }

        .border_blue {
            border: 2px solid #002060
        }

        back span,
        .back a {
            font-size: 14px;
        }

        .txt_full {
            letter-spacing: 14px;
            text-align: center;
            padding-left: 5px;
            padding-right: 5px;
            overflow: hidden;
        }


        .hrbc .back h3 {
            font-size: 15px
        }

        .hrbc .barcode {
            bottom: 0;
            position: absolute;
        }

        .hrbc.back span,
        .back a {
            font-size: 14px
        }

        .hrbc.back a,
        .hrbc.back h2 {
            color: #002060
        }

        .hrbc .title {
            background-color: #002060;
            color: #fff;
            font-size: 15px;
            text-align: right;
            width: 100%;
            padding: 5px 0;
            box-sizing: border-box;
            padding-right: 5px;

        }

        .hrbc {
            position: relative
        }

        .hrbc .logo {
            position: absolute;
            z-index: 2;
            top: 0;
            left: 4px
        }

        .id_title {
            display: block;
            overflow: hidden;
            color: #fff;
            text-align: center;
            padding: 3px 45px 3px 12px;
            position: absolute;
            z-index: 2;
            top: 5px;
            right: 0
        }

        .hrbc .txt_full {
            letter-spacing: 13.5px;
            font-weight: normal;
            padding-left: 5px;
        }

        .hrbc .content {
            position: relative;
        }

        .id_bg {
            width: 100%;
            margin-top: 5px;
        }

        .hrbc .student_pic {
            margin-top: -38px;
        }

        .hrbc.back h3 {
            margin-top: 10px;
            margin-bottom: 2px;
        }

        .hrbc.back h2 {
            margin-bottom: 5px;
            margin-top: 5px;
        }
        /*table{padding-left:2px}*/
        table td{line-height:1}
        .hrbc tr td:first-child{width:54px}
        .hrbc .student_pic img{margin:4px auto}

        @media print{
            @page {
                size:  A4 landscape;
                margin-top: 10mm;
                margin-left: 0.10in;
                margin-right: 0;
                margin-bottom: 0;
            }

            * {
                -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
                color-adjust: exact !important;                 /*Firefox*/
            }
        }
        @media print
        {
            div{
                page-break-inside: avoid;
            }
        }
    </style>
</head>

<body @if($templateConfig->body_text_color) style="color:{{$templateConfig->body_text_color}};"@endif>
<section class="main">
    <div class="row">
        <!-- khalil mir college-->
        @if($side == "front" || $side=="both")
            @foreach($employees as $employee)
        <div class="card light_blue hrbc" style="@if($templateConfig->bg_color) background-color:{{$templateConfig->bg_color}}; @endif @if($templateConfig->border_color) border-color:{{$templateConfig->border_color}}; @endif">
            <div class="logo"><img src="data:image/png;base64,{{$templateConfig->logo}}"></div>
            <div class="header">
                <div class="title"  style="@if($templateConfig->fs_title_color) color:{{$templateConfig->fs_title_color}};@endif @if($templateConfig->fs_title_bg_color) background-color:{{$templateConfig->fs_title_bg_color}};@endif">{{strtoupper($instituteInfo['name'])}}</div>
            </div>
            <div class="content">
                @if($templateConfig->title_bg_image)
                    <img class="id_bg" src="data:image/png;base64,{{$templateConfig->title_bg_image}}" />
                    @else
                <img class="id_bg" src="">
                @endif
                <span class="id_title" @if($templateConfig->id_title_color) style="color:{{$templateConfig->id_title_color}};"@endif>Employee ID CARD</span>
                <span class="student_pic">
                        <img class="border_blue" @if($templateConfig->picture_border_color) style="border-color:{{$templateConfig->picture_border_color}};"@endif src="@if($employee->photo){{ asset('storage/employee')}}/{{ $employee->photo }} @else {{ asset('images/avatar.jpg')}} @endif" />
                    </span>
                <table border="0" cellpadding="0" cellspaing="0">
                    <tr>
                        <td class="bold">Name</td>
                        <td class="bold">:</td>
                        <td>{{$employee->name}}</td>
                    </tr>
                    <tr>
                    <tr>
                        <td class="bold">Designation</td>
                        <td class="bold">:</td>
                        <td>{{$employee->designation}}</td>
                    </tr>
                    <tr>
                        <td class="bold">Phone No.</td>
                        <td class="bold">:</td>
                        <td>{{$employee->phone_no}}</td>
                    </tr>
                    <tr>
                        <td class="bold">Religion</td>
                        <td class="bold">:</td>
                        <td>{{$employee->religion}}</td>
                    </tr>
                    <tr>
                        <td class="bold">Shift</td>
                        <td class="bold">:</td>
                        <td>{{$employee->shift}}</td>
                    </tr>
                </table>
            </div>
            <div class="footer">
                <div class="signature">
                    <img src="" />
                    <span>Authorized Signature</span>
                </div>

            </div>

        </div>
            @endforeach
        @endif
        @if($side =="back" || $side=="both")
            @foreach($employees as $employee)
        <div class="card back light_blue hrbc" style="@if($templateConfig->bg_color) background-color:{{$templateConfig->bg_color}}; @endif @if($templateConfig->border_color) border-color:{{$templateConfig->border_color}}; @endif">
            <h3 class="bold">If Found Please Return the Card To</h3>
            <img src="data:image/png;base64,{{$templateConfig->logo}}" class="back-logo" />
            <h2 @if($templateConfig->bs_title_color) style="color:{{$templateConfig->bs_title_color}};"@endif>{{strtoupper($instituteInfo['name'])}}</h2>
            <span class="address">{{$instituteInfo['address']}} <br /> {{$instituteInfo['phone_no']}}</span>
            <a href="#" @if($templateConfig->website_link_color) style="color:{{$templateConfig->website_link_color}};"@endif>{{$instituteInfo['website_link']}}</a>
            <span>Email: {{$instituteInfo['email']}}</span>
            <div class="barcode">
                <img src="{{AppHelper::getIdcardBarCode($employee->id_card)}}" />
                <span class="txt_full">{{$employee->id_card}}</span>
            </div>
        </div>
        @endforeach
    @endif
        <!--end hrbc-->
    </div>
</section>
<script type="text/javascript">
    window.onload = function () {
        window.print();
        // window.close();
    };
</script>
</body>

</html>